<template>
	<view class="" >
		<u-datetime-picker ref="datetimePicker" @confirm="useCarconfirm" :formatter="formatter"
			@cancel="useCarShow=false" @close='useCarShow=false' :show="useCarShow" v-model="useCarTime"
			mode="datetime"></u-datetime-picker>
		<view class="info-box align-center" @tap="setTime('start')" >
			<view class="info-box-item justify-between">
				<view class="align-center">
				{{startUsecCarTime?startUsecCarTime:(selectCarTypeCurrent==0?'开始用车时间':'请选择用车时间')}}
				</view>
				<view class="align-center">
					<u-icon  name="arrow-right" size="23rpx"></u-icon>
				</view>
			</view>
	
		</view>
		<view class="info-box align-center" @tap="setTime('end')" v-if="selectCarTypeCurrent==0">
			<view class="info-box-item justify-between">
				<view class="align-center">
					{{endUsecCarTime || '结束用车时间'}}
				</view>
				<view class="align-center">
					<u-icon  name="arrow-right" size="23rpx"></u-icon>
				</view>
			</view>
			
		</view>
		<!-- <u-picker @close='airShow' @confirm="airConfirm" @cancel="airShow=!airShow" :show="airShow"
			:columns="airColumns" keyName='name'></u-picker>
		<view class="info-box align-center" @tap="airShow=!airShow">
			<view class="info-box-item justify-between">
				<view class="align-center">
					 {{air.name || '请选择起点机场'}}
				</view>
				<view class="align-center">
					<u-icon name="arrow-right" size="23rpx"></u-icon>
				</view>
			</view>
	
		</view> -->
		<view class="info-box align-center" @tap="chooseLocation('start')" >
			<view class="info-box-item justify-between">
				<view class="align-center">
					{{startLocation || '请填写上车地点'}}
				</view>
				<view class="align-center">
					<u-icon name="arrow-right" size="23rpx"></u-icon>
				</view>
			</view>
			
		</view>
		<view class="info-box align-center" @tap="chooseLocation('end')" >
			<view class="info-box-item justify-between">
				<view class="align-center">
					{{endLocation || '请填写下车地点'}}
				</view>
				<view class="align-center">
					<u-icon name="arrow-right" size="23rpx"></u-icon>
				</view>
			</view>
	
		</view>
	
		<!-- <view class="info-box align-center">
			<view class="info-box-item justify-between">
				<view class="align-center">
					接机人数
				</view>
				<view class="align-center">
					<u-number-box integer bgColor='#ffffff00'>
						<view slot="minus" class="minus">
							<u-icon name="minus" color="#FFFFFF" size="12"></u-icon>
						</view>
						<view slot="plus" class="plus">
							<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
						</view>
	
					</u-number-box>
				</view>
			</view>
	
		</view> -->
		<view class="info-box align-center">
			<view class="info-box-item justify-between" style="border: none;">
				<view class="align-center">
					备注
				</view>
				<view class="remark align-center">
	
					<u-input placeholderStyle='color:#8C8C8C' inputAlign='right' class="info-box"
						fontSize='26rpx' placeholder="请填写您的需求" border="none" clearable></u-input>
				</view>
			</view>
	
		</view>
		<view class="" style="height: 15rpx;">
	
		</view>
	</view>
</template>

<script>
	import {
		host
	} from '@/config/config.js'
	import {
		mapActions
	} from 'vuex'
	export default {
		name: "tab1",
		props:{
			selectCarTypeCurrent:{
				default:0,
			}
		},
		data() {
			return {
				startLocation:'',
				endLocation:'',
				startUsecCarTime:'',
				endUsecCarTime:'',
				noteShow: false,
				useCarTime: Number(new Date()),
				useCarShow: false,
				car_note: '',
				carInd: null,
				airColumns: [
					[]
				],
				air:{
					name:''
				},
				airShow: false,
				carTypeCurrent: 0,
				tabList: [],
				loading: false,
			};
		},
		created() {
			this.getCarInfo()
	
		},
		mounted() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		computed: {
	
	
	
	
		},
	
		methods: {
			...mapActions([ 'getAirList', 'getCarList']),
			useCarconfirm(e) {
				let usecCarTime =	this.$moment(e.value).format('YYYY-MM-DD hh:mm')
				if(this.type == 'start'){
					this.startUsecCarTime = usecCarTime
				}else{
					this.endUsecCarTime = usecCarTime
				}
			this.useCarShow = false
			},
			setTime(e){
				this.type = e
				this.useCarShow=true
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			
			chooseLocation(type){
				let _this = this
				uni.chooseLocation({
					complete(e){
						console.log(e);
						if(type=='start'){
							_this.startLocation = e.name
						}else{
							_this.endLocation = e.name
						}
					}
				})
			},
			airConfirm(e) {
				console.log(e.indexs[0]);
			this.air = this.airColumns[0][e.indexs[0]]
			this.airShow= false
			},
			async getCarInfo() {
				// 机场
				let arires = await this.getAirList()
				this.airColumns = [
					[...arires]
				]
				this.loading = true
			},
	
	
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.info-box {
		height: 90rpx;
		padding: 0 30rpx;
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: 400;
		font-size: 26rpx;
	
		.info-box-item {
			width: 100%;
			height: 90rpx;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #6C6C6C;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	
			.minus {
				width: 38rpx;
				height: 38rpx;
				background-color: #FFAAAA;
				border-top-left-radius: 100px;
				border-top-right-radius: 100px;
				border-bottom-left-radius: 100px;
				border-bottom-right-radius: 100px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
	
			.input {
				padding: 0 10px;
			}
	
			.plus {
				width: 38rpx;
				height: 38rpx;
				background-color: #C73636;
				border-radius: 50%;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				justify-content: center;
				align-items: center;
			}
	
			.remark {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 24rpx;
			}
		}
	}
</style>